<!--
 * @Author: Xujianchen
 * @Date: 2024-06-22 08:52:20
 * @LastEditors: xujianchen
 * @LastEditTime: 2024-08-27 17:47:01
 * @Description: 全局包裹页面组件
-->
<template>
  <el-main class="main-container">
    <el-page-header
      v-show="showTitle && $route.meta.showTitle"
      :icon="isShowBack"
      :content="title || $route.meta.title"
      :style="headerStyle"
      class="page-title"
      @back="$router.go(-1)"
    >
      <template #content>
        <slot name="title" />
      </template>
    </el-page-header>
    <slot />
  </el-main>
</template>

<script setup name="Wrapper">
import { isBoolean } from '@/utils/type'
import { wrapperProps } from './props'

defineOptions({ name: 'Wrapper' })
const props = defineProps(wrapperProps)

const isShowBack = computed(() => {
  const back = props.showBack
  if (isBoolean(back) && !back) return null

  return back
})
</script>

<style lang="scss" scoped>
:deep(.el-page-header__content) {
  font-size: $font-size-large;
  color: #333;
  font-weight: bold;
  margin-bottom: $space-small;
}

:deep(.el-page-header__back),
:deep(.el-page-header__left > .el-divider--vertical) {
  display: none;
}

.main-container {
  transition: all 0.3s;
}
</style>
